<template>
  <div>
    <a-layout-content>
      <div class="to-detail">
        <router-link to="/toServiceManagement">查看企业详情 <a-icon type="right-circle"/></router-link>
      </div>
      <a-row :gutter="16">
        <a-col :span="7">
          <multi-pie></multi-pie>
          <res-radar></res-radar>
        </a-col>
        <a-col :span="10">
          <div class="map-box">
            <div class="target-area-box">
              <p>当前区域：{{ targetAreaNum.name }}</p>
              <p>未处理数：{{ targetAreaNum.reject }}</p>
              <p>已派单数：{{ targetAreaNum.pedding }}</p>
              <p>已完成数：{{ targetAreaNum.resolve }}</p>
            </div>
            <map-chart :targetArea="targetArea" @mapChange="mapChange" />
            <ul class="supplier-list">
              <li
                v-for="(item, index) in areaList"
                :key="index"
                :class="{ checked: item.checked }"
                @click="areaClick(index)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <a-card
            class="index-ant-card card-list"
            :style="{ 'padding-bottom': '16px', height: '300px' }"
            size="small"
            title="工单记录"
          >
            <a-table class="chart-table" :pagination="pagination" :columns="columns" :dataSource="tableData"> </a-table>
          </a-card>
        </a-col>
        <a-col :span="7">
          <a-card
            class="index-ant-card"
            :style="{ 'margin-bottom': '16px', height: '400px' }"
            size="small"
            title="国家政策法规、行业标准"
          >
            <a-list class="chart-list" size="small" :dataSource="infoData">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-icon type="file-text" theme="twoTone" twoToneColor="rgb(22,160,174)" />
                <span class="title">{{ item }}</span>
              </a-list-item>
            </a-list>
          </a-card>
          <sat-radar></sat-radar>
        </a-col>
      </a-row>
      <!-- <num-animate></num-animate> -->
    </a-layout-content>
    <!-- <a-modal class="chart-modal" v-model="visible" maskClosable :closable="false">
      <pie-modal></pie-modal>
    </a-modal> -->
  </div>
</template>

<script>
import MultiPie from '@/components/CleanBaskDemo/multiPie'
import MapChart from '@/components/CleanBaskDemo/map'
import ResRadar from '@/components/CleanBaskDemo/resRadar'
import SatRadar from '@/components/CleanBaskDemo/satRadar'
import PieModal from '@/components/CleanBaskDemo/pieModal'
import NumAnimate from '@/components/CleanBaskDemo/numAnimate'
export default {
  name: 'ServiceManagement',
  components: {
    MultiPie,
    MapChart,
    ResRadar,
    SatRadar,
    PieModal,
    NumAnimate
  },
  data () {
    return {
      visible: false,
      areaList: [
        { name: '清徐县', checked: true },
        { name: '阳曲县', checked: false },
        { name: '娄烦县', checked: false },
        { name: '小店区', checked: false },
        { name: '迎泽区', checked: false },
        { name: '杏花岭区', checked: false },
        { name: '尖草坪区', checked: false },
        { name: '万柏林区', checked: false },
        { name: '晋源区', checked: false },
        { name: '古交市', checked: false }
      ],
      targetArea: '清徐县',
      targetAreaNum: {
        name: '清徐县',
        reject: 300,
        pedding: 200,
        resolve: 500
      },
      areaAllNum: [
        { name: '清徐县', reject: 300, pedding: 200, resolve: 500 },
        { name: '阳曲县', reject: 400, pedding: 300, resolve: 600 },
        { name: '娄烦县', reject: 500, pedding: 400, resolve: 700 },
        { name: '小店区', reject: 600, pedding: 500, resolve: 800 },
        { name: '迎泽区', reject: 700, pedding: 600, resolve: 900 },
        { name: '杏花岭区', reject: 800, pedding: 700, resolve: 100 },
        { name: '尖草坪区', reject: 900, pedding: 800, resolve: 200 },
        { name: '万柏林区', reject: 100, pedding: 900, resolve: 300 },
        { name: '晋源区', reject: 200, pedding: 100, resolve: 400 },
        { name: '古交市', reject: 300, pedding: 200, resolve: 500 }
      ],
      // table数据
      pagination: {
        hideOnSinglePage: true
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'key'
        },
        {
          title: '用户名',
          dataIndex: 'name'
        },
        {
          title: '电话',
          dataIndex: 'tel'
        },
        {
          title: '客诉事由',
          dataIndex: 'cause'
        },
        {
          title: '提交时间',
          dataIndex: 'time'
        }
      ],
      tableData: [
        {
          key: '1',
          name: '张三',
          tel: '14542314436',
          cause: '设备故障',
          time: '2020/1/21'
        },
        {
          key: '2',
          name: '李四',
          tel: '14542344136',
          cause: '设备故障',
          time: '2020/1/21'
        },
        {
          key: '3',
          name: '王五',
          tel: '14532543525',
          cause: '设备故障',
          time: '2020/1/21'
        },
        {
          key: '4',
          name: '赵柳',
          tel: '14543252356',
          cause: '设备故障',
          time: '2020/1/21'
        },
        {
          key: '5',
          name: '王五',
          tel: '14532543525',
          cause: '设备故障',
          time: '2020/1/21'
        }
      ],
      // 国家政策法规、行业标准
      infoData: [
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...',
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...',
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...',
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...',
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...',
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...',
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...',
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...',
        '优化电代煤价格政策(一)“一户一表”居民电代煤用户电价政策由增加6000千瓦时一档...'
      ]
    }
  },
  methods: {
    areaClick (index) {
      this.visible = true
      this.areaList.forEach((ele, n) => {
        ele.checked = false
        if (index === n) {
          ele.checked = true
          this.targetArea = ele.name
          this.targetAreaNum = this.areaAllNum.find(item => item.name === ele.name)
        }
      })
    },
    mapChange (name) {
      this.visible = true
      this.areaList.forEach(ele => {
        ele.checked = false
        if (name === ele.name) {
          ele.checked = true
          this.targetArea = ele.name
          this.targetAreaNum = this.areaAllNum.find(item => item.name === ele.name)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-layout-content {
  padding: 0 16px;
  .map-box {
    position: relative;
    .target-area-box {
      position: absolute;
      bottom: 16px;
      left: 16px;
      color: #fff;
      z-index: 10;
      background: #060d3c;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid rgb(11, 26, 92);
      p {
        margin-bottom: 0;
        line-height: 30px;
        font-size: 12px;
      }
    }
    .supplier-list {
      position: absolute;
      bottom: 16px;
      right: 16px;
      color: #fff;
      margin: 0;
      padding: 16px 0;
      list-style: none;
      border: 1px solid rgb(11, 26, 92);
      background: rgb(6, 13, 60);
      li {
        padding: 0 24px;
        font-size: 12px;
        text-align: center;
        margin-bottom: 8px;
        cursor: pointer;
        position: relative;
        &:last-child {
          margin: 0;
        }
        &.checked::after {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 3px;
          border: 1px solid #fff;
          left: 10px;
          top: 50%;
          margin-top: -3px;
        }
      }
    }
  }
  .ant-card.card-list /deep/ .ant-card-body {
    height: 190px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 3px;
      height: 3px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #ccc;
    }
    &.side-menu::-webkit-scrollbar-thumb {
      background: transparent;
    }
  }
}
.to-detail {
  overflow: hidden;
  padding: 16px;
  a {
    float: right;
    color: rgb(8, 67, 237);
  }
}
</style>
